<template>
	<view class="shq_tabs">
		<view class="tabs_item" :class="{'check':checkActive == 0}" :id="'tabs_item'+0" @click="itemCheck(0)">
			<image src="../../../static/images/icon/21.png"></image>
			<text>店铺列表</text>
		</view>
		<view class="tabs_item" :class="{'check':checkActive == 1}" :id="'tabs_item'+1" @click="itemCheck(1)">
			<image src="../../../static/images/icon/20.png"></image>
			<text>精选团购</text>
		</view>
		<view :style="elementStyle" class="checkLine"></view>
	</view>
</template>

<script>
	export default {
		props:{
			tabs:{
				type:Array,
				default:function(){
					return [];
				}
			},
			active:{
				type:Number
			},
			distance:{
				type:Number
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.checkLineLocation(this.active);
			});
		},
		data() {
			return {
				checkActive:this.active,
				elementStyle: {
					transform: 'translateX(0px)',
					transition: 'transform 0.5s ease-out'
				}
			}
		},
		methods:{
			checkLineLocation(ob)
			{
				const query = uni.createSelectorQuery().in(this);
				query.select('#tabs_item'+ob).boundingClientRect((data)=>{
					if(data)
					{
						this.elementStyle.transform = 'translateX('+(data.left + this.distance)+'px)';
						// this.checkLineLeft = data.left + 50;
					}
				}).exec();
				
				
			},
			itemCheck(num)
			{
				this.checkLineLocation(num);
				this.checkActive = num;
				this.$emit('custom-event',num);
			}
		}
	}
</script>

<style>
.shq_tabs{width: 100%; height: 40px;}
.tabs_item{width: auto; padding-right: 10px; height: 38px; float: left; margin-right: 20px;}
.tabs_item image{width: 22px; height: 22px; margin-top: 9px; float: left;}
.tabs_item text{font-size: 18px; color: #696969; font-weight: bold; height: 30px; margin-left: 3px; float: left; margin-top: 5px; line-height: 30px;}
.checkLine{width: 30px; height: 4px; border-radius: 2px; background-color: #ff2a57; position: relative; left: 0px; top: 35px;}
.check text{color:#212624}
</style>